<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认的外边距【通配选择器】 设置背景颜色
			        2.product_card 设置样式：内边距，边框设置颜色，加倒角
			         加阴影 所有内容--居中：text-align：center
					3.图片边框倒角，外边距？ 
					4.小米 SU7  文字：外边距？
					5.279999.00 文字大小，外边距？
					6.颜色，外边距？内边距？
			*/
		   #product_card{
			   background-color: white;
			   padding: 15px;
			   border: 1px solid #d3d3d3;
			   width: 260px;
			   height: 500px;
			   box-shadow: 0px 0px 1px 1px #d1d1d1;
			   text-align: center;
		   }
            #img{
				
				border-radius: 10px 10px 50px 10px;
			
		   }
		   #zc{border-radius: 3px 3px 3px 3px;}
		   #qq{
			   color: red;
		   }
		   #bb{
			   font-size: 10px;
			   color: #a2a2a2;
		   }
		   #h3{
			   margin: 20px;
			   color: black;
		   }
		   #cs{
			   width: 230px;
			   height: 50px;
			   border-radius: 3px 3px 3px 3px;
			   box-shadow: 0px 0px 1px 1px #d1d1d1;
			 
		   }
		  #in{
			  border: 0;
			  width: 160px;
			  height: 20px;
				margin: 15px 2px 6px 8px;
		  }
		  #yy{
			  border: 0;
			   border-radius: 3px 3px 3px 3px;
			  
			  padding: 6px 10px 6px 10px;
			  background-color: red;
			  color: white;     
		  }
		   
		   
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/5db7ad1f19d4f3fb696298c7c30d6f1.jpg" alt="su7" width="260px" height="358px" id="zc">
			<h3>小米su7</h3>
			<p id="qq">￥279999.00</p>
			<p id="bb">已有10万＋人评价<span></span></p>
		</div>
		<div id="cs">
			<input placeholder="搜索 京东商品" id="in" /><button id="yy">搜索</button>
		</div>
		
	</body>
</html>